<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>云校通-教师-我的班级</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<script src="<%=basePath %>/js/picker.js"></script>
<script src="<%=basePath %>/js/select.js"></script>
<body ontouchstart id="wd_xkpt">
	<div class="weui_tab tab-bottom">
		<div class="weui_tab_bd">
			<div class="weui-header bg-blue"> 
		  		<div class="weui-header-left"> <a onclick="back()" href="javascript:;" class="icon icon-109 f-white">返回</a> </div>
		    	<h1 class="weui-header-title">${term.termName }</h1>
		    </div>
	        <div class="weui_tab" id="tab4">
	            <div class="weui_navbar">
	                <div class="weui_navbar_item ">
	                   	 已报名<span id="hadCount"></span>
	                </div>
	                <div class="weui_navbar_item">
	                   	 未报名<span id="noCount"></span>
	                </div>
	            </div>
	            <div class="weui_tab_bd" style="padding-bottom: 55px;">
			        <div class="weui_tab_bd_item">
			        	<div class="weui_panel_bd">
	                    	<div class="weui_media_box weui_media_small_appmsg" id="signedList">
			                    
			                </div>  
			            </div>
			        </div>
			        <div class="weui_tab_bd_item">
			        	<div class="weui_panel_bd">
							<div class="weui_media_box weui_media_small_appmsg" id="noSignList">
	                    
	                		</div>
			            </div>
			        </div>
	            </div>
	        </div>
		</div>
	</div>
	
	<!--弹窗-->				
	<div class="weui_mask ueureiu weui_mask_visible" style="display: none;">
	</div>
	<div id="xs_div_box" class="weui_tab tab-bottom" style="display:none; z-index:600; background-color: #f8f8f8;">
		<div class="weui_tab_bd">
	        <div class="weui-header bg-blue"> 
	        	<div class="weui-header-left" id="studentBack"> <a class="icon icon-109 f-white">取消</a>  </div>
				<h1 class="weui-header-title">课程列表</h1>
			</div>
	        <!--下拉选择-->
	        <div class="page-bd" id="courseList">  
	    	</div>
	    	<script id="student-table-template" type="text/x-handlebars-template">
                <div>
					{{#each list}}
                    	<div class="weui_cells" style="margin: 0;">
                    		<div class="weui_cell">
								<div class="weui_cell_hd list_c2" style="margin-right: 10px;">
									<label class="weui_cells_checkbox weui_check_label" for="{{id}}_{{classDate}}">
										<div class="weui_cell_hd">
											{{#compare limitNum studentSignCount}}
											<input type="checkbox" class="weui_check" value="{{id}}_{{classDate}}_{{courseName}}" id="{{id}}_{{classDate}}">
			        						<i class="weui_icon_checked"></i>
											{{/compare}}
										</div>
									</label>
								</div>
								<div class="weui_cell_bd weui_cell_primary">
									<p>{{courseName}}（{{studentSignCount}}/{{limitNum}}）</p>
									<p style="font-size: 0.9rem;color: #fb1919;">上课时间：{{classDate}}</p>
								</div>
							</div>
							<div style="display: none;">
								<ul class="list_3">
								</ul>
							</div>
						</div>
					{{/each}}
				</div>
	         </script>
	       </div>
	   		<!--End下拉选择-->
	   		<div class="weui_tabbar">
				<div class="fsdx_tabbar">
		            <span class="left" id="checkCourse">请选择</span>
		            <span class="right" onclick="courseSure()"><a href="javascript:">确定</a></span>
		        </div>
			</div>
		</div>
	</div>
	<!-- 学生组织架构 end -->
	<!--End弹窗-->
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
$(function() {
	$('#tab4').tab({
		defaultIndex: 0,
		activeClass: "tab-blue "
	});
	loadSignedList();
	loadNoSignList();
	$("#studentBack").click(function() {
		$('.ueureiu').hide();
		$("#xs_div_box").hide();
	});
})
var isSubmit = true;
//hhk：调班那里无效
function loadSignedList() {
	$.ajax({
   		url: basePath + "/ls/kccs/course/signed/list",
   		type: 'POST',
   		dataType : "json",
   		success: function(data) {
   			if(data != null) {
   				var html = '';
   				for(var i in data) {
   					html += '<div class="weui_cells weui_cells_1">\
								<div class="weui_cell">\
							<div class="weui_cell_bd">\
								<p>'+data[i].studentName+'</p>\
							</div>\
							<div class="weui_cell_bd weui_cell_primary weui_cell_ft">\
								<span class="icon icon-99 f20 f-blue"></span>\
								<a href="javascript:;" onclick="changeClass(this)">调班</a>\
							</div>\
						</div>';
						for(var j in data[i].courseList) {
							var itm = data[i].courseList[j];
							if(j == 0) {
								html += '<div class="weui_cell">\
									<div class="weui_cell_bd weui_cell_primary"><b>上课时间</b></div>\
									<div class="weui_cell_bd">\
										<b>'+(itm.courseType == 1 ? "选修课" : "特长班")+'</b>\
									</div>\
								</div>';
							}
							html += '<div class="weui_cell xkpt-lesson">\
										<div class="weui_cell_bd">\
											<p>'+itm.classDate+'</p>\
										</div>\
										<div class="weui_cell_bd weui_cell_primary weui_cell_ft">\
											<a href="<%=basePath%>/xs/interest/course/detail/'+itm.courseId+'?sid=${user.parent.studentId}">'+itm.courseName+'</a>\
										</div>\
									</div>';
						}
					html += '</div>';
   				}
   				$("#hadCount").html("("+data.length+")");
   				$("#signedList").html(html);
   			}
   		},
   		error: function(data) {
   			alert("系统异常,请联系管理员");
   		}
   });
}

function loadNoSignList() {
	$.ajax({
   		url: basePath + "/ls/kccs/course/noSign/list",
   		type: 'POST',
   		dataType : "json",
   		success: function(data) {
   			if(data != null) {
   				var html = '';
   				for(var i in data) {
   					html += '<div class="weui_cells weui_cells_1">\
   								<div class="weui_cell">\
									<div class="weui_cell_bd">\
										<p>'+data[i].studentName+'</p>\
									</div>\
									<div class="weui_cell_bd weui_cell_primary weui_cell_ft">\
										<span class="icon icon-99 f20 f-blue"></span>\
										<a href="javascript:;" onclick="chooseClass(this)">选课</a>\
									</div>\
								</div>\
								<div class="weui_cell">\
									暂无\
								</div>\
							 </div>';
   				}
   				$("#noCount").html("("+data.length+")");
   				$("#noSignList").html(html);
   			}
   		},
   		error: function(data) {
   			alert("系统异常,请联系管理员");
   		}
   });
}

function initChooseCourse(thiz) {
	$.ajax({
   		url: basePath + "/ls/kccs/course/signCourseMap",
   		type: 'POST',
   		dataType : "json",
   		success: function(data) {
			loadStudentHtml({list: data.data});
   		},
   		error: function(data) {
   			alert("系统异常,请联系管理员");
   		}
	});
}
function chooseClass(thiz) {
	var obj = $(thiz);
	var objOuter = obj.closest(".weui_cells");
	if(obj.hasClass("isChange")){
		var objInput = objOuter.find("input")
		var studentId = emptyToNull($(objInput).attr("student-id"));
		var courseArray = [];
		$(objInput).each(function(i,v){
			var varray = v.value.split("_");
			if(varray[0].length>0) {
				courseArray.push({
					courseId: varray[0], 
					courseName: varray[2]
				});
			}
		});
		if(studentId == null || courseArray.length == 0) return;
		var dataObj = {studentId: studentId, list: courseArray};
		for(var i in courseArray) {
			i = parseInt(i);
			if(i < courseArray.length - 1) {
				if(courseArray[i].classDate == courseArray[i + 1].classDate) {
					$.alert("不能选择同一天的课程", "");
					return;
				}
			}
		}
		if(!isSubmit) return;
		isSubmit = false;
		$.ajax({
			url: basePath + "/ls/kccs/course/signSubmit",
	   		type: 'POST',
	   		dataType : "json",
	   		contentType: "application/json",
	   		data: JSON.stringify(dataObj),
	   		success: function(data) {
	   			isSubmit = true;
	   			if(data.code == '000') {
	   				$.toast("提交成功");
	   				setTimeout(function() {
	   					loadNoSignList();
	   					loadSignedList();
    				}, 1000);
	   			}else {
	   				$.alert(data.msg, "");
	   			}
	   		},
	   		error: function(data) {
	   			isSubmit = true;
	   			alert("系统异常,请联系管理员");
	   		}
		});
	}else{
		obj.addClass("isChange f-red");
		obj.text("保存");
		obj.prev().addClass("f-red").removeClass("f-blue");
		//下面的不知道指哪来
		objOuter.find(".xkpt-lesson").addClass("weui_cells_access");
		objOuter.find(".xkpt-lesson-input").addClass("on");
		initChooseCourse(thiz);
	}
}
function changeClass(thiz) {
	var obj = $(thiz);
	var objOuter = obj.closest(".weui_cells");

	if(obj.hasClass("isChange")){
		var objInput = objOuter.find("input")
		var studentId = emptyToNull($(objInput).attr("student-id"));
		var courseArray = [];
		$(objInput).each(function(i,v){
			var varray = v.value.split("_");
			courseArray.push({
				courseId: varray[0], 
				courseName: varray[2], 
				classDate: varray[1]
			});
		});
		if(studentId == null || courseArray.length == 0) return;
		var dataObj = {studentId: studentId, list: courseArray};
		for(var i in courseArray) {
			i = parseInt(i);
			if(i < courseArray.length - 1) {
				if(courseArray[i].classDate == courseArray[i + 1].classDate) {
					$.alert("不能选择同一天相同的课程", "");
					return;
				}
			}
		}
		if(!isSubmit) return;
		isSubmit = false;
		$.ajax({
			url: basePath + "/ls/kccs/course/changeSubmit",
	   		type: 'POST',
	   		dataType : "json",
	   		contentType: "application/json",
	   		data: JSON.stringify(dataObj),
	   		success: function(data) {
	   			isSubmit = true;
	   			if(data.code == '000') {
	   				$.toast("提交成功");
	   				setTimeout(function() {
	   					loadSignedList();
    				}, 1000);
	   			}else {
	   				$.alert(data.msg, "");
	   			}
	   		},
	   		error: function(data) {
	   			isSubmit = true;
	   			alert("系统异常,请联系管理员");
	   		}
		});
	}else{
		obj.addClass("isChange f-red");
		obj.text("保存");
		obj.prev().addClass("f-red").removeClass("f-blue");
		objOuter.find(".xkpt-lesson").addClass("weui_cells_access");
		objOuter.find(".xkpt-lesson-input").addClass("on");
		initChooseCourse(thiz);
	}
}

function categoryClick() {
	$parent = $(this).closest('li');
	if($parent.hasClass('js-show')){
        $parent.removeClass('js-show');
        $parent.find('i').removeClass('icon-35').addClass('icon-74');
    }else{
        $parent.siblings().removeClass('js-show');
        $parent.addClass('js-show');
        $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
        $parent.find('i').removeClass('icon-74').addClass('icon-35');
    }
}
function loadStudentHtml(studentData) {
	var myTemplate = Handlebars.compile($("#student-table-template").html());
	Handlebars.registerHelper("equal", function(v1,v2,options) {
		if(v1 == v2) {
			//满足添加继续执行
			return options.fn(this);
		}else {
			//不满足条件执行{{else}}部分
			return options.inverse(this);
		}
	});
	Handlebars.registerHelper("compare", function(v1,v2,options) {
		if(v1 > v2) {
			//满足添加继续执行
			return options.fn(this);
		}else {
			//不满足条件执行{{else}}部分
			return options.inverse(this);
		}
	});
	$('#courseList').html(myTemplate(studentData));
}
//课程列表
var itemObj;
function showCourse(obj) {
	itemObj = obj;
	$('.ueureiu').show();
	$("#xs_div_box").show();
	$("#courseList .js-category").each(function(i, v) {
		v.removeEventListener("click", categoryClick, false);
		v.addEventListener('click', categoryClick);
	})
	$('.list_c2 input').click(function() {
		if(this.checked) {
			var list_c2 = $(this.closest("#courseList")).find("input:checked");
			list_c2.each(function(i, v){
				v.checked = false;
			});
			this.checked = true;
			$("#checkCourse").html("已选择");
			return;
		}
		$("#checkCourse").html("请选择");
	});
}
function courseSure() {
	$('.ueureiu').hide();
	$("#xs_div_box").hide();
	var inputData = $("#courseList").find(".list_c2 input:checked");
	if(inputData.length > 0){
		var v = $(inputData[0]).val();
		itemObj.value = v;
		$(itemObj).prev().html(v.split("_")[1] + "/" + v.split("_")[2]);
		var list_c2 = $("#courseList").find("input:checked");
		list_c2.each(function(i, v){
			v.checked = false;
		});
	}
}
</script>
</html>